import React from "react";
import {Collapse as AntdCollapse, Form as AntdForm} from 'antd';
import {
    renderItems,
    VJsonComponent,
    VJsonComponentBase,
} from "../factory";
import _ from 'lodash'
import {YvanEvent} from "../types";
import {apply, YvanEventBind} from "../utils/helper";

const {Panel: AntdPanel} = AntdCollapse;

export interface CollapsePanelVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean
    disabled?: boolean
    forceRender?: boolean
    header?: boolean
    key: string
    showArrow?: boolean
    items: any[]
}

export interface CollapseVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean
    activeKey?: string
    defaultActiveKey?: string
    bordered?: boolean
    accordion?: boolean
    onChange?: YvanEvent<Collapse>
    expandIconPosition?: 'left' | 'right'
    ghost?: boolean
    items: CollapsePanelVJsonProp[]
}

export interface CollapseState {

}

@VJsonComponent({
    view: 'collapse'
})
export default class Collapse extends VJsonComponentBase<CollapseVJsonProp, CollapseState> {
    static defaultProps: CollapseVJsonProp = {
        visible: true,
        items: []
    }

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Collapse.defaultProps
        )
    }

    renderPanel(): any[] {
        return _.map(this.props.vjson.items, item => {
            if (!item.visible) {
                return null
            }

            return (
                <AntdPanel key={item.key}
                           header={item.header}
                           disabled={item.disabled}
                           forceRender={item.forceRender}
                           showArrow={item.showArrow}>
                    {...renderItems(this, item.items)}
                </AntdPanel>
            )
        })
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }

        return (
            // @ts-ignore
            <AntdCollapse key={this.key} view_id={this.key} aria-roledescription={this.view}
                activeKey={apply(this, this.props.vjson.activeKey)}
                defaultActiveKey={this.props.vjson.defaultActiveKey}
                bordered={apply(this, this.props.vjson.bordered)}
                accordion={apply(this, this.props.vjson.accordion)}
                onChange={YvanEventBind(this.props.vjson.onChange, this)}
                expandIconPosition={apply(this, this.props.vjson.expandIconPosition)}
                ghost={apply(this, this.props.vjson.ghost)}
            >

                {...this.renderPanel()}

            </AntdCollapse>
        )
    }
}
